<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置css样式</title>
    <!--    react.js的核心文件, 支持react语法-->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <!--    react-dom.js 支持react有关的DOM操作-->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!--    jsx-->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--    设置CSS样式-->
    <style>
        .title{
            background-color: cornflowerblue;

        }
        #txt{
            background-color: blueviolet;
        }
    </style>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script type="text/babel">
    let app=document.getElementById('app');
    /*
    1.通过class给标签设置CSS样式
    注意:如果给jsx里面的标签设置CSS,属性名要写成className
    * */
    ReactDOM.render(
        <div>
            <h2 className="title">今天星期二,要周考啦!要交钱啦</h2>
            <p id="txt"> 这是一个段落标签!</p>
        </div>,app
    )
   /*
    通过style属性的方式设置样式
    注意:在JSX语法中,给标签通过style设置样式,需要注意style中值不再是一个字符串,而是一个对象,且必须在react编译环境中
     */
    let style={backgroundColor:"blue",textAlign:"center"};
    ReactDOM.render(
        <ul>
            <li style={{fontSize:"20px",color:"red",...style}}>列表1</li>
            <li style={{fontSize:"30px",...style}}>列表2</li>
        </ul>
    ,app)
</script>